<template>
    <div class="app-container">
        <el-form :model="queryParams" class="frominfo" size="small" :inline="true" v-show="showSearch" label-width="88px">
          <div class="from-item" style="color: #8c8c8c;">
            <el-form-item label="任务编号:" prop="taskId">
                <span>{{ taskInfo.taskId }}</span>
            </el-form-item>
            <el-form-item label="创建人:" prop="createBy">
                <span>{{ taskInfo.createBy }}</span>
            </el-form-item>
            <el-form-item label="创建时间:" prop="createBy">
                <span>{{ taskInfo.createTime }}</span>
            </el-form-item>
          </div>
      </el-form>
      <el-form :model="queryParams" class="frominfo" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
          <div class="from-item" style="width: 80%;">
            <el-form-item :label="taskInfo.taskType==3?'群名称':'微信名称'" prop="wcUserName">
              <el-input v-model="queryParams.wcUserName" @keyup.enter.native="handleQuery" :placeholder="taskInfo.taskType==3?'请输入群名称':'请输入微信名称'" clearable/>
            </el-form-item>
            <el-form-item label="所属助手" prop="wcName">
              <el-input v-model="queryParams.wcName" @keyup.enter.native="handleQuery" placeholder="请输入所属助手" clearable/>
            </el-form-item>
          </div>
          <div class="from-Btn">
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
            </el-form-item>
            <el-form-item>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </div>
      </el-form>
  
      <div class="line-state" :style="taskInfo.taskType==3?'width:260px;':''">
           <div class="state-box" @click="setState(item.value)" :class="state==item.value?index==0?'select frist-border':index==2?'select end-border':'select':index==0?'frist-border':index==2?'end-border':''" :style="index==1?'border-right: 1px solid #d1e5ff;border-left: 1px solid #d1e5ff;':''" v-for="item,index in finishState" :key="index">{{ item.label }}</div>
      </div>

      <el-table v-loading="loading" v-if="state==0" :data="wcTimedTasksList" :header-cell-style="{ background: '#fcfcfd', color: '#000' }" :border="false">
       
        <el-table-column :label="taskInfo.taskType==3?'群名称':'微信名称'" prop="wcUserName" align="center" :show-overflow-tooltip="true"/>
        <el-table-column :label="taskInfo.taskType==3?'群ID':'微信ID'" prop="applyWcId" align="center" :show-overflow-tooltip="true"/>
        <el-table-column label="手机号" v-if="taskInfo.taskType==0" prop="applyUserPhone" align="center" :show-overflow-tooltip="true"/>
        <el-table-column  label="预计执行时间" prop="executeTime" align="center" :show-overflow-tooltip="true" width="180">
              <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.executeTime, '{y}-{m}-{d} {h}:{i}') }}</span>
              </template>
        </el-table-column>
        <el-table-column label="所属营销助手" prop="wcName" align="center" :show-overflow-tooltip="true"/>
        
        <el-table-column label="操作" align="center" width="120" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button size="mini" type="warning" style="background-color: #fb9d52;color: #fff;width: 50px;" icon="el-icon-circle-close" @click="handleUpdate(scope.row)">取消</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-table v-loading="loading" v-if="state==1" :data="wcTimedTasksList" :header-cell-style="{ background: '#fcfcfd', color: '#000' }" :border="false">
       <el-table-column :label="taskInfo.taskType==3?'群名称':'微信名称'" prop="wcUserName" align="center" :show-overflow-tooltip="true"/>
       <el-table-column :label="taskInfo.taskType==3?'群ID':'微信ID'" prop="applyWcId" align="center" :show-overflow-tooltip="true"/>
       <el-table-column label="手机号" v-if="taskInfo.taskType==0" prop="applyUserPhone" align="center" :show-overflow-tooltip="true"/>
       <el-table-column  label="执行时间" prop="executeTime" align="center" :show-overflow-tooltip="true" width="180">
             <template slot-scope="scope">
                 <span>{{ parseTime(scope.row.executeTime, '{y}-{m}-{d} {h}:{i}') }}</span>
             </template>
       </el-table-column>
       <el-table-column label="所属营销助手" prop="wcName" align="center" :show-overflow-tooltip="true"/>
       <el-table-column :label="taskInfo.taskType==2||taskInfo.taskType==3?'发送结果':'申请结果'" prop="applyState" align="center" width="120" class-name="small-padding fixed-width">
         <template slot-scope="scope">
           <span>{{taskInfo.taskType==2||taskInfo.taskType==3?scope.row.applyState==0?'未发送':'已发送':scope.row.respondResult==0?'未通过':'已通过'}}</span>
         </template>
       </el-table-column>
       <el-table-column :label="taskInfo.taskType==2||taskInfo.taskType==3?'发送时间':'通过时间'"  prop="respondTime" align="center" :show-overflow-tooltip="true" width="180">
             <template slot-scope="scope">
                 <span>{{ parseTime(scope.row.respondTime||scope.row.updateTime, '{y}-{m}-{d} {h}:{i}') }}</span>
             </template>
       </el-table-column>
     </el-table>

     <el-table v-loading="loading" v-if="state==3" :data="wcTimedTasksList" :header-cell-style="{ background: '#fcfcfd', color: '#000' }" :border="false">
       <el-table-column label="微信名称" prop="wcUserName" align="center" :show-overflow-tooltip="true"/>
       <el-table-column label="微信ID" prop="applyWcId" align="center" :show-overflow-tooltip="true"/>
       <el-table-column label="手机号" v-if="taskInfo.taskType==0" prop="applyUserPhone" align="center" :show-overflow-tooltip="true"/>
       <el-table-column label="聊天时间" prop="lastChatTime" align="center" :show-overflow-tooltip="true" width="180">
             <template slot-scope="scope">
                 <span>{{ parseTime(scope.row.lastChatTime, '{y}-{m}-{d} {h}:{i}') }}</span>
             </template>
       </el-table-column>
       <el-table-column label="所属营销助手" prop="wcName" align="center" :show-overflow-tooltip="true"/>
       <el-table-column label="聊天详情" v-if="checkPermi(['massage:massage:getMags'])" align="center" width="120" class-name="small-padding fixed-width">
          <template>
            <el-button size="mini" type="warning" style="background-color: #fb9d52;color: #fff;width: 50px;" icon="el-icon-circle-close" @click="golink(scope.row.wcName,scope.row.applyWcId,scope.row.wcId,scope.row.wcUserName)" v-hasPermi="['arbit:wctimedtasks:edit']">详情</el-button>
          </template>
       </el-table-column>
     </el-table>
     <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/>
  
    </div>
  </template>
  
  <script>
  
  import request from '@/utils/request'
  import { checkPermi } from "@/utils/permission";
  export default {
    name: "WcTimedDetial",
    dicts: ['sys_friend_proport'],

    data() {
      return {
        // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 定时任务信息表格数据
      wcTimedTasksList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        taskId:null,
        wcName: null,
        wcUserName: null,
        applyState:0,
        delFlag:0,
        respondResult:null,
        isChat:null,
      },
      state:0,
      finishState:[{label:'未申请好友',value:0},{label:'已申请好友',value:1},{label:'已聊天好友',value:3}],
      taskInfo:{},
      };
    },
    created() {
      //console.log(this.$route.query)
      if(this.$route.query==undefined||this.$route.query==''){
        this.$router.go(-1); 
      }else{
        this.taskInfo=JSON.parse(this.$route.query.info)
        //console.log(this.taskInfo)
        this.queryParams.taskId=this.taskInfo.taskId
      }
    },
    mounted() {
      //this.loading = false;
        if(this.taskInfo.taskType==0){
          this.finishState=[{label:'未申请好友',value:0},{label:'已申请好友',value:1},{label:'已聊天好友',value:3}]
        }else if(this.taskInfo.taskType==2){
          this.finishState=[{label:'未发送好友',value:0},{label:'已发送好友',value:1},{label:'已回复好友',value:3}]
        }else if(this.taskInfo.taskType==3){
          this.finishState=[{label:'未发送群聊',value:0},{label:'已发送群聊',value:1}]
        }
        this.getList();
      
    },
    methods: {
        checkPermi,
        golink(name,userid,wxid,username){
          this.$router.push({ path:"/group/detial/",name:'detial',query: { wxid,name,userid,username }}).catch(()=>{});
        },
        /** 查询定时任务信息列表 */
        getList() {
          this.loading = true;
          listWcTimedDetail(this.queryParams).then(res => {
            if (res['success']) {
              const dt = res['data'];
              this.total = dt['total'];
              this.wcTimedTasksList = dt['records'];
            }
            this.loading = false;
          });
          setTimeout(()=>{
            this.loading = false;
          },2000)
        },
        setState(id){
            this.state=id
            this.queryParams.isChat=null
            this.queryParams.respondResult=null
            if(this.taskInfo.taskType==0){
              this.queryParams.respondResult=id;
            }else{
              this.queryParams.applyState = id;
            }
            if(id==3){
              this.queryParams.isChat=1
            }
            this.loading=true
            
            var that=this
            setTimeout(()=>{
              that.getList();
            },300)
            
        },
        /** 搜索按钮操作 */
        handleQuery() {
          this.queryParams.startExecuteTime=null
          this.queryParams.endExecuteTime=null
          if(this.chatTime!=''&&this.chatTime!=null){
            this.queryParams.startExecuteTime=this.chatTime[0]+' 00:00:00'
            this.queryParams.endExecuteTime=this.chatTime[1]+' 23:59:59'
          }
    
          this.queryParams.startCreateTime=null
          this.queryParams.endCreateTime=null
          if(this.chatTimes!=''&&this.chatTimes!=null){
            this.queryParams.startCreateTime=this.chatTimes[0]+' 00:00:00'
            this.queryParams.endCreateTime=this.chatTimes[1]+' 23:59:59'
          }
          this.queryParams.pageNum = 1;
          this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
          this.resetForm("queryForm");
          this.chatTime=[]
          this.chatTimes=[]
          if(this.taskInfo.taskType==2){
            if(this.state==3){
              this.queryParams.respondResult=1
            }
          }else{
            if(this.state==3){
              this.queryParams.isChat=1
            }
          }
          this.queryParams.applyState = this.state;
          this.handleQuery();
        },
        
        /** 修改按钮操作 */
        handleUpdate(row) {
          this.$modal.confirm('是否确认取消所选定时任务信息？').then(function() {
            return updateWcTimedTasks(row.id);
          }).then(() => {
            this.getList();
            this.open = false;
            this.$modal.msgSuccess("取消成功");
          }).catch(() => {});
        },
    
    }
};

/** js请求 调用 */

// 查询定时任务信息列表
export function listWcTimedDetail(query) {
  return request({
    url: '/arbit/wctask_details/page',
    method: 'get',
    params: query
  })
}
// 取消定时任务信息
export function updateWcTimedTasks(id) {
  return request({
    url: '/arbit/wctask_details/cancelTask/'+id,
    method: 'POST',
  })
}

</script>
  <style scoped lang="scss">
    .app-container{
      background-color: #f6f9fb;
    }
    .line-state{
      display: flex;
      width: 390px;
      border:1px solid #d1e5ff;
      font-size: 14px;
      border-radius: 5px;
      background-color: #fff;
      .state-box{
        width: 130px;
        height: 35px;
        color: #8c8c8c;
        text-align: center;
        line-height: 35px;
      }
      .frist-border{
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
      }
      .end-border{
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
      }
      .select{
        color: #fff;
        background-color: #288dfc;
      }
    }
    .frominfo{
      display: flex;background-color: #fff;padding: 10px;padding-bottom: 0; margin-bottom: 20px;
      .from-item{
        display: flex;flex-wrap: wrap;
      }
      .from-Btn{
        display: flex;flex-direction: column;align-items: center;justify-content: center;width: 20%;
      }
    }
    .linebtn{
      display: flex;
      margin: -10px 0 10px 5px;
      height: 38px;
      .btn{
          width: 180px;
          text-align: center;
          line-height: 38px;
          font-size: 14px;
          color: #8c8c8c;
          margin-right: 10px;
          border: 1px solid #eaeff2;
          background-color: #fff;
          border-radius: 5px;
          .link-type{
            color: #8c8c8c;
          }
      }
      .select{
          background-color: #eaf6ff;
          border:1px solid #288dfc;
          color: #288dfc;
          font-weight: 550;
      }
    }
    .dia-box{
      margin-top: -20px;
      padding: 0 20px 20px 20px;
      display: flex;
      flex-direction: column;
        .dia-box-search{
          display: flex;
          align-items: center;
          margin-bottom: 10px;
          .select-all{
            border:1px solid #DCDFE6;height: 36px;line-height: 36px;padding:0 10px;border-radius: 4px;
          }
        }
        .dia-box-time{
            display: flex;
            flex-direction: column;
        }
        .dia-box-lable{
          width:90%;
          border-radius: 5px;
          border:1px solid #eee;
          min-height: 100px;
          display: flex;
          flex-wrap: wrap;
          padding: 10px;
          margin-bottom: 20px;
          .lable-box{
            padding: 0 5px;
            height: 20px;
            line-height: 20px;
            margin-right: 10px;
            border: 1px solid #dcdcdc;
            background-color: #ebf4ff;
            font-size: 12px;
            border-radius: 3px;
          }
          .select{
            color: #fff;
            background-color: #4095e5;
          }
        }
        .dialog-footer{
          display: flex;
          justify-content: center;
        }
        .addbtn{
          width: 130px;
          border-radius: 5px;
          background-color: #0078fb;
          border-color: #0078fb;
          font-size: 15px;
          text-align: center;
          height: 40px;
          line-height: 40px;
          color: #fff;
          margin-bottom: 15px;
        }
    }
  </style>